import { Login } from "@/api/user";
import LoginBg from "@/assets/bg-1.jpg";
import { Button, ConfigProvider, Form, Input, message } from "antd";
import zhCN from "antd/locale/zh_CN";
import { history, useMutation } from "umi";

export default function Page() {
  const {
    isLoading,
    data,
    mutateAsync: mutateLogin,
  } = useMutation({
    mutationFn: Login,
  });

  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: "#4A90E2",
        },
      }}
    >
      <section
        className=" min-h-screen flex items-center px-20 bg-cover bg-bottom"
        style={{
          backgroundImage: `url(${LoginBg})`,
        }}
      >
        <div className="flex-1 flex items-center justify-center flex-col">
          &nbsp;
        </div>
        <Form
          layout="vertical"
          autoComplete="off"
          onFinish={async (values) => {
            console.log("values is", values);
            const res = await mutateLogin({
              ...values,
            });

            if (!res?.token?.accessToken) {
              message.error("登录失败, accessToken不存在");
              return;
            }

            localStorage.setItem("token", res?.token.accessToken);
            history.replace("/");
          }}
          size="large"
          className="w-[400px] rounded-2xl bg-white  px-10 py-20 shadow-2xl"
        >
          {/* <img src={Logo} className=" block mx-auto mb-4" alt="" /> */}
          <h1 className=" text-center text-3xl text-[#7f2726]">
            众创汇乂支点孵化器
          </h1>
          <Form.Item
            name="phone"
            rules={[{ required: true, message: "请输入账号!" }]}
          >
            <Input placeholder="请输入账号" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码!" }]}
          >
            <Input type="password" placeholder="请输入密码" />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              block
              size="large"
              htmlType="submit"
              loading={isLoading}
            >
              登录
            </Button>
          </Form.Item>

          <p className="text-right">
            <Button type="link">忘记密码?</Button>
          </p>
        </Form>
      </section>
    </ConfigProvider>
  );
}
